<template>
  <div class="home">
    <keep-alive>
      <router-view/>
    </keep-alive>
    <div class="tabbar">
      <router-link to="/index">
        <i class="icon-index"> </i>
        <span>首页</span>
      </router-link>
      <router-link to="/sort">
        <i class="icon-sort"> </i>
        <span>分类</span>
      </router-link>
      <router-link to="/circles">
        <i class="icon-circles"></i>
        <span>米圈</span>
      </router-link>
      <router-link to="/cart">
        <i class="icon-cart"> </i>
        <span>购物车</span>
      </router-link>
      <span class="span-length" v-show="goodsPrice != 0">{{
        goodsPrice
      }}</span>
      <router-link to="/mine">
        <i class="icon-mine"></i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
export default {
  name: 'HomeView',
  mounted(){
    if(this.$route.path=="/"){
      this.$router.replace(`/index`)
    }
  },
  computed:{
    ...mapGetters(["goodsPrice"]),
  }
}
</script>
<style lang="scss" scoped>
.home{
  .tabbar{
    position: fixed;
    bottom: -1px;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #cdcdcd;
    background-color: #fff;
    padding-top: 2px;
    box-sizing: border-box;

    .van-tabbar{
      justify-content: space-between;
      .van-tabbar-item{
        margin-top: 2vw;
      }
    } 
    a{
      display: flex;
      flex-flow: column;
      align-items: center;
      width: 40px;
      color: #333;
      font-size: 12px;
      i{
        display: block;
        width: 23px;
        height: 23px;
        background-size: contain;
      }
      .icon-index{
        background-image: url(../assets/images/home1.png);
      }
      .icon-sort{
        background-image: url(../assets/images/sort1.png);
      }
      .icon-circles{
        background-image: url(../assets/images/circle1.png);
      }
      .icon-cart{
          background-image: url(../assets/images/cart1.png);
        }
      .icon-mine{
        background-image: url(../assets/images/mine1.png);
      }
      &.router-link-active{
        color: #FF6700;
        .icon-index{
        background-image: url(../assets/images/home.png);
        }
        .icon-sort{
          background-image: url(../assets/images/sort.png);
        }
        .icon-circles{
          background-image: url(../assets/images/circle.png);
        }
        .icon-cart{
          background-image: url(../assets/images/cart.png);
        }
        .icon-mine{
          background-image: url(../assets/images/mine.png);
        }
      }
    }
  }
  .span-length {
      position: absolute;
      top: 0;
      right: 25vw;
      color: #fff;
      display: block;
      font-size: 10px;
      width: 3vw;
      height: 3vw;
      line-height: 3vw;
      text-align: center;
      border-radius: 50%;
      background-color: red;
    }
}
</style>

